<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button menuToggle icon-only color="royal">
        <ion-icon name="person-add"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="royal" (click)="openSearch()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col col-10  offset-1 id="slides">
        <ion-slides pager="true">
          <ion-slide>
            <ion-grid>
              <ion-row padding-top>
                <ion-col>
                  <span class="font_0">剩余</span>
                </ion-col>
                <ion-col>
                  <span class="font_0">今天背单词</span>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col>
                  <span class="font_1">50</span><span class="font_2">天</span>
                </ion-col>
                <ion-col>
                  <span class="font_1">15</span><span class="font_2">个</span>
                </ion-col>
              </ion-row>
              <ion-row class="row0" id="row" margin-horizontal padding-bottom>
                <ion-col>
                  <span class="font_0">四级高频</span>
                </ion-col>
                <ion-col>
                  <button ion-button outline round id="button0"><span class="font_2">改计划</span></button>
                </ion-col>
              </ion-row>
              <ion-row class="row0" padding-top margin-horizontal>
                <ion-col id="col0">
                  <span class="font_2">已完成</span><span class="font_0" ion-text color="primary">0</span><span class="font_0">/</span><span class="font_0">739</span>
                </ion-col>
                <ion-col id="col1">

                    <ion-col no-padding>
                      <ion-icon name="ios-cloud-download-outline"></ion-icon>
                      <span class="font_3">离线单词包</span>
                    </ion-col>
                    <ion-col no-padding>
                      <ion-icon name="ios-list-box-outline"></ion-icon>
                      <span class="font_3">单词列表</span>
                    </ion-col>
                </ion-col>
              </ion-row>
              <ion-row margin-horizontal padding-bottom>
                <ion-col>
                  <div class="progress">
          					<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 30%;">
          						<div class="progress-value">30%</div>
          					</div>
          				</div>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
        </ion-slides>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="flex">
        <ion-col>
          <span class="font_4">今日需学习15/15</span>
        </ion-col>
        <ion-col>
          <span class="font_4">今日需复习0</span>
        </ion-col>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-10  offset-1>
        <button ion-button full>开始背单词吧  </button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col offset-1 col-5>
        <button ion-button block outline>单词TV</button>
      </ion-col>
      <ion-col col-5>
        <button ion-button block outline>单词电台</button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>
